<script setup name="Home">
import 'swiper/css';
import "swiper/css/pagination";
import 'swiper/css/autoplay'
import 'swiper/css/effect-fade'
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Pagination, Autoplay, EffectFade } from "swiper/modules";
import { useAppStore } from '@/store/modules/app'
import { getImg } from '@/api/home';
import { Message } from '@arco-design/web-vue'

const router = useRouter();

var appStore = useAppStore();

const modules = [
    Pagination,
    Autoplay,
    EffectFade
]

const onSwiper = () => {

}
const onSlideChange = () => {

}

const handleToAbout = () => {
  appStore.setTitle('垃圾')
  Message.success('呵呵');
  router.push('/about')
}

const imgList = ref([
  
])

const darkVal = ref(appStore.dark)

const initImage = async () => {
  const res = await getImg('https://api.apiopen.top/api/getImages?page=0&size=5');
  const { result: { list } } = res;
  imgList.value = (list || []).map(o => o.url)
}
initImage()
</script>

<template>
  <page-wrapper style="_padding: 0">
    <a-row :gutter="12">
      <a-col :span="12">
        <swiper
          :pagination="true"
          :modules="modules"
          :loop="true"
          :autoplay="{ delay: 3000, disableOnInteraction: false }"
          @swiper="onSwiper"
          @slideChange="onSlideChange"
          style="border-radius: 20px"
        >
          <swiper-slide v-for="img in imgList">
            <img class="w-full h-60 " :src="img" />
          </swiper-slide>
        </swiper>
      </a-col>
      <a-col :span="12">
        <a-list>
          <template #header>
            我的工作记录
          </template>
          <a-list-item>Beijing Bytedance </a-list-item>
          <a-list-item>Bytedance Tech</a-list-item>
          <a-list-item>Beijing Toutiao Tec</a-list-item>
          <a-list-item>Beijing Volcengine Te</a-list-item>
        </a-list>
      </a-col>
      <a-col :span="24">
        <a-button @click="handleToAbout">关于</a-button>
      </a-col>
      <a-col :span="24">
        <Clock />
      </a-col>
    </a-row>
  </page-wrapper>
</template>

<style scoped>

</style>
